<template>
    <div class="page">
        <div class="total_show">
            <div class="item flex-center flex-column">
                <span>可用余额</span>
                <p>{{ balanceInfo.aviBalance }}</p>
            </div>
            <div class="item flex-center flex-column">
                <span>冻结余额</span>
                <p>{{ balanceInfo.frezzBalance }}</p>
            </div>
        </div>
        <a-form class="form">
            <a-range-picker class="mar-r10" size="small" style="width: 238px;height: 32px"
                v-model:value="tableQuery.rangeTime" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" picker="date"
                allowClear />
            <a-input class="form-item" v-model:value="tableQuery.keyWord" placeholder="关键词搜索"></a-input>
            <a-button class="form-btn" @click="search" type="primary">查询</a-button>
        </a-form>
        <div class="page_content flex-column">
            <div class="flex-1">
                <table-container v-slot="{ containerHeight }">
                    <lo-table :columns="tableColmun" :dataSource="tableData" :height="containerHeight">
                        <template #bodyCell="{ column, record }">

                        </template>
                    </lo-table>
                </table-container>
            </div>
            <div class="pager">
                <a-pagination @change="pageChange" v-model:current="tablePager.index" :pageSize="tablePager.size"
                    :total="tablePager.total" :showSizeChanger="false" />
            </div>
        </div>

    </div>
</template>

<script lang="jsx" setup>
import { ref, onMounted, onActivated, nextTick } from 'vue'
import { getMerBalance, getBalanceChangeHis } from '@/api/system'
import md5 from 'js-md5'
import { useStore } from 'vuex'
const Store = useStore()

onMounted(() => {
    search()
})


function search() {
    pageChange(1)
    getBalance()
}


const balanceInfo = ref({
    aviBalance: '',
    frezzBalance: '',
})
function getBalance() {
    getMerBalance().then(res => {
        balanceInfo.value.aviBalance = res.data.aviBalance
        balanceInfo.value.frezzBalance = res.data.frezzBalance
    })
}


// ************ list ************
const tableQuery = ref({
    rangeTime: [],
    keyWord: '',
})
const tableColmun = ref([
    { title: '序号', type: 'index', },
    { title: '订单号', dataIndex: 'orderNo' },

    { title: '可用变动', dataIndex: 'changeAviBalance'},
    { title: '可用余额', dataIndex: 'newAviBalance' },
    { title: '冻结变动', dataIndex: 'changeFrezzBalance'},
    { title: '冻结余额', dataIndex: 'newFrezzBalance'},

    { title: '备注', dataIndex: 'changeRemark'},
    { title: '变动时间', dataIndex: 'createTime'},
])
const tablePager = ref({
    index: 1,
    total: 0,
    size: 30
})
const tableData = ref([])
function pageChange(e) {
    tablePager.value.index = e
    setTimeout(getList)
}
function getList() {
    getBalanceChangeHis({
        startTime: tableQuery.value.rangeTime[0] || '',
        endTime: tableQuery.value.rangeTime[1] || '',
        keyWord: tableQuery.value.keyWord,
        pageIndex: tablePager.value.index,
        pageSize: tablePager.value.size
    }).then(res => {
        tableData.value = res.data.data.list
        tablePager.value.total = +res.data.data.total
    })
}




</script>

<style lang="less" scoped>

.total_show{
    background: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 20px;
    display: flex;
    justify-content: center;
    .item{
        width: 400px;
        span{
            font-size: 16px;
            color: #999;
        }
        p{
            font-size: 32px;
            margin-top: 10px;
        }
    }

}

</style>
